<!--
 * @Descripttion: 拼团列表
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-28 15:39:19
-->
<template>
    <div class="lb-new-assemble">
        <top-nav :isBack="true"/>
        <div class="page-main">
            <el-row class="page-top-operate">
                <lb-button type='primary' @click="$router.push('/malls/assembleManage?id=' + id)">添加拼团规则</lb-button>
            </el-row>
            <el-table
                v-loading='loading'
                :data="tableData"
          :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="ID">
                </el-table-column>
                <el-table-column
                    prop="goodsname"
                    label="商品名">
                </el-table-column>
                <el-table-column
                    label="封面图">
                    <template slot-scope="scope">
                        <lb-image  :src="scope.row.goods_cover" />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="spe_content"
                    label="拼团规格">
                </el-table-column>
                <el-table-column
                    prop="price"
                    label="拼团单价">
                </el-table-column>
                <el-table-column
                    prop="people"
                    label="成团人数">
                </el-table-column>
                <el-table-column
                    prop="number"
                    label="起购数量">
                </el-table-column>
                <el-table-column
                    label="是否限购">
                    <template slot-scope="scope">
                      <span>{{scope.row.limit ? '是' : '否'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="操作">
                    <template slot-scope="scope">
                        <div class="table-operate">
                            <lb-button type='primary' size='mini' plain @click="$router.push(`/malls/assembleManage?cid=${scope.row.collage_id}&id=${id}` )">{{$t('action.edit')}}</lb-button>
                            <lb-button type='danger' size='mini' plain @click="delAssemble(scope.row.id,scope.row.$index)">{{$t('action.delete')}}</lb-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <lb-page
            :batch='false'
            :page='page'
            :pageSize='limit'
            :total='total'
            @handleSizeChange='handleSizeChange'
            @handleCurrentChange='handleCurrentChange'
            >
            </lb-page>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      id: '',
      limit: 10,
      page: 1,
      total: 0,
      tableData: []
    }
  },
  created () {
    let {id} = this.$route.query
    this.id = id
  },
  activated () {
    this.getGoodsAssembleList()
  },
  methods: {
    handleSizeChange (val) {
      this.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.page = val
      this.getGoodsAssembleList()
    },
    /**
       * @method 获取商品拼团列表
       */
    getGoodsAssembleList () {
      this.loading = true
      let {id, limit, page} = this
      this.$api.getGoodsAssembleList({goods_id: id, limit, page}).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.tableData = res.data.data
          this.total = res.data.total
        }
      })
    },

    /**
     * @method 删除拼团
     */
    delAssemble (id, index) {
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.$api.editOrDelGoodsAssemble({id, status: -1, goods_id: this.id}).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success(this.$t('tips.successDel'))
            this.page = this.page < Math.ceil((this.total - 1) / this.limit) ? this.page : Math.ceil((this.total - 1) / this.limit)
            this.getGoodsAssembleList()
          }
        })
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .lb-new-assemble{
        width: 100%;
        .page-main{
            .el-table{
                img{
                    width: 60px;
                    height: 60px;
                }
            }
        }
    }
</style>
